<template>
  <div>
    <!-- 除String类型可静态传递props，其他类型均需要使用v-bind动态传递props -->
    <!-- String类型传入属性名但未给值则为空字符串，Boolean类型传入属性名但未给值则为true -->
    <OneWayBindingChildren
      props-one-type-string="one definite type string"
      :props-one-type-number="200"
      props-one-type-boolean
      :props-one-type-array="['A','B','C']"
      :props-one-type-object="{
        name: 'SYX',
        age: 19,
      }"

      props-many-type-a
      props-many-type-b

      :props-basic-type-item="false"

      :props-validate="'TYT'"
    />

    <!-- 对象语法，动态绑定多个值 -->
    <OneWayBindingChildren v-bind="propsObject"/>

    <!-- 组件上使用v-bind:xxx.prop可缩写为.，所绑定的xxx必须在子组件中已被声明 -->
  </div>
</template>

<script>
import {defineComponent} from 'vue';
import OneWayBindingChildren from '@/components/one-way-binding/OneWayBindingChildren.vue';

export default defineComponent({
  name: 'OneWayBinding',
  components: {OneWayBindingChildren},
  data() {
    return {
      propsObject: {
        propsOneTypeString: 'one definite type string',
        propsOneTypeNumber: 200,
        propsOneTypeBoolean: true,
        propsOneTypeArray: ['A', 'B', 'C'],
        propsOneTypeObject: {
          name: 'SYX',
          age: 19,
        },
        propsManyTypeA: '',
        propsManyTypeB: true,
        propsBasicTypeItem: false,
        propsValidate: 'TYT'
      }
    };
  }
});
</script>

<style scoped>

</style>